<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Basic PropertyGrid - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="../../../../js/lib/jquery-easyui-v1.5.1/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../../js/lib/jquery-easyui-v1.5.1/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../demo.css">
		<script type="text/javascript" src="../../../../js/lib/jquery-easyui-v1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="../../../../js/lib/jquery-easyui-v1.5.1/jquery.easyui.min.js"></script>
	</head>

	<body>
		<h2>Basic PropertyGrid</h2>
		<p>Click on row to change each property value.</p>
		<div style="margin:20px 0;">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="showGroup()">ShowGroup</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="hideGroup()">HideGroup</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="showHeader()">ShowHeader</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="hideHeader()">HideHeader</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getChanges()">GetChanges</a>
		</div>
		<table id="pg" class="easyui-propertygrid" style="width:300px" data-options="
				url:'../data/propertygrid_data1.json',
				method:'get',
				showGroup:true,
				scrollbarSize:0
			">
		</table>

		<script type="text/javascript">
			function showGroup() {
				$('#pg').propertygrid({
					showGroup: true
				});
			}

			function hideGroup() {
				$('#pg').propertygrid({
					showGroup: false
				});
			}

			function showHeader() {
				$('#pg').propertygrid({
					showHeader: true
				});
			}

			function hideHeader() {
				$('#pg').propertygrid({
					showHeader: false
				});
			}

			function getChanges() {
				var s = '';
				var rows = $('#pg').propertygrid('getChanges');
				for(var i = 0; i < rows.length; i++) {
					s += rows[i].name + ':' + rows[i].value + ',';
				}
				alert(s)
			}
		</script>
	</body>

</html>